<template>
  <div class="app-container">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-button
      type="text"
      @click="
        dialogVisible = true;
        subject.parentId = '0';
      "
      style="margin: 20px 0"
    >
      添加一级分类
    </el-button>
    <el-tree
      class="filter-tree"
      :data="subjectList"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="
              dialogVisible = true;
              subject.parentId = data.id;
            "
            v-if="node.level === 1"
          >
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => delListById(data.id)"
          >
            删除
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="40%">
      <el-form :model="subject" label-width="120px">
        <el-form-item label="分类标题">
          <el-input v-model="subject.title" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import subjectApi from "@/api/subject";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
    },
    // 添加课程分类
    addSubject() {
      // 调用添加课程分类的api
      subjectApi.addSubject(this.subject).then((res) => {
        // 添加成功提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        // 关闭对话框
        this.dialogVisible = false;
        // 重新加载分类列表
        this.init();
        // 将课程分类文本框中的文本清空
        this.subject.title = "";
      });
    },
    // 删除课程分类
    delListById(id) {
      // console.log(id);
      this.$confirm("您确定要删除此课程分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          // 点击确认在进行调用subject.js中的删除api
          subjectApi.delListById(id).then((res) => {
            // 删除成功
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          });
          // 重新加载删除后的数据
        })
        .catch(() => {});
    },
    init() {
      //   获取课程分类列表数据
      subjectApi
        .getList()
        .then((res) => {
          // console.log(res);
          this.subjectList = res.data;
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "获取数据失败!",
          });
        });
    },
  },

  data() {
    return {
      subject: {
        parentId: "0",
      }, // 课程分类对象
      dialogVisible: false, // 控制添加分类的对话框是否弹出
      filterText: "",
      subjectList: [],
      defaultProps: {
        children: "children", // 子节点显示所对应的属性名
        label: "title", // 标题（节点显示的文本）所对应的属性名
      },
    };
  },

  created() {
    //   调用获取课程分类列表数据的方法
    this.init();
  },
};
</script>